<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        ul {
            width: 1000px;
            height: 60px;
            border-bottom: 3px solid skyblue;
            margin: 50px auto;
            /* 这里的弹性布局时为了让 li 横向排列 */
            display: flex;
            position: relative;
        }

        li {
            /* 每一个 li 占父元素的一份 */
            flex: 1;
            height: 100%;
            /* 再 li 里面写 弹性布局是为了让文字绝对居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        span {
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100px;
            height: 3px;
            background-color: red;
        }

    </style>
</head>
<script src="js/jquery.min.js"></script>

<body>
<ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
    <li>选项6</li>
    <li>选项7</li>
    <li>选项8</li>
    <li>选项9</li>
    <li>选项10</li>
    <span></span>
</ul>

</body>
<script>
    //每一个li添加移入事件
    $('ul > li').mouseover(function () {
        //this是移入的li
        // 移入li的索引值 $(this).index()

        // 让 span 滑块 的 left 值跟着改变就可以了
        //   运动就使用 animate() 函数
        // $('span').animate({
        //   left: $(this).index() * 100    第n个选项卡*选项卡宽度
        // })

        // 每次移入的时候, 都让之前的动画停止, 直接做最新的这个动画
        $('span').stop().animate({
            left: $(this).index() * 100
        })
    })

</script>
</html>